<template>
  <el-container>
    <!-- 头部 -->
    <el-header>
      <div class="logo-wrap"></div>

      <div class="user-wrap">
        <span>{{realname}}</span>
        <span @click="handleSignOut">退出</span>
      </div>
    </el-header>
    <el-container>
      <!-- 左侧菜单栏 -->
      <el-aside width="200px">
        <!-- 导航菜单 -->
        <el-menu
          :default-active="this.$router.path"
          class="el-menu-vertical-demo"
          background-color="#fff"
          text-color="#8B8E94"
          router
        >
          <el-menu-item index="/">
            <i class="el-icon-menu"></i>
            <span slot="title">个人中心</span>
          </el-menu-item>
          <el-menu-item index="article">
            <i class="el-icon-menu"></i>
            <span slot="title">文章管理</span>
          </el-menu-item>
          <el-menu-item index="personal">
            <i class="el-icon-menu"></i>
            <span slot="title">个人日记</span>
          </el-menu-item>
          <el-menu-item index="category">
            <i class="el-icon-menu"></i>
            <span slot="title">标签管理</span>
          </el-menu-item>
          <el-menu-item index="user">
            <i class="el-icon-menu"></i>
            <span slot="title">用户管理</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <!-- 右侧内容区 -->
      <el-main>
        <!-- 选中的菜单标题 -->
        <div class="title-wrap">
          <h2>个人中心</h2>
        </div>
        <!-- 路由显示 -->
        <div class="router-wrap">
          <router-view />
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
export default {
  name: "home",
  data(){
    return {
      realname:''
    }
  },
  methods: {
    // 退出登陆
    handleSignOut() {
      if (sessionStorage.getItem("user")) {
        window.sessionStorage.removeItem("user");
        this.$message({
          message: "退出登陆",
          type: "success"
        });
        this.$router.push("/login");
      } else {
        this.$message({
          message: '已退出登陆，请检查是否有无退出',
          type: "warning"
        });
      }
    }
  },
  mounted(){
    let {realname} = JSON.parse(sessionStorage.getItem('user'))
    this.realname = realname
  }
};
</script>
<style scoped lang='less'>
.el-container {
  height: 100%;
  // 头部
  .el-header {
    background: #343a44;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .logo-wrap {
    }
    .user-wrap {
      span {
        padding: 0 10px;
        cursor: pointer;
      }
    }
  }

  .el-container {
    // 左侧导航
    .el-aside {
      .el-menu {
        background: #fff;
        .el-menu-item {
          background: #fff;
          border-bottom: 1px solid #e6e6e6;
          text-align: center;
        }
      }
    }
    // 右侧内容区
    .el-main {
      background: #f8f9fb;
      padding: 0 20px;
      height: calc(100vh - 60px);
      // 标题显示
      .title-wrap {
        height: 60px;
        background: #fff;
        border: 1px solid #e6e6e6;
        h2 {
          margin: 0;
          padding: 0;
          line-height: 60px;
          padding-left: 30px;
          font-weight: 500;
        }
      }
      .router-wrap {
        border: 1px solid #e6e6e6;
        margin: 10px 0;
        box-sizing: border-box;
        background: #fff;
        border-radius: 5px;
      }
    }
  }
}
</style>